import React, { useState } from 'react'
import "./index.less"

interface IProp {
    title: string;
    // list里面要放的是两个内容 ：中文和对应的英文，只能使用对象把中文和英文的结合体传入
    // key 英文
    // value 中文
    list: IKeyValue[],
    // 当子组件里面的 选项被点击时调用的函数
    change: (value: string) => void
}

export default function SelectOptions({ title, list, change }: IProp) {
    const [curIndex, setIndex] = useState(0)
    const clickHandle = (index: number, value: string) => {
        setIndex(index)
        change(value)
    }
    return (
        <div className='options'>
            <h4>{title}</h4>
            <ul>
                {
                    list.map((item, index) => <li onClick={() => clickHandle(index, item.key)} className={curIndex === index ? 'active' : ''} key={item.key}>{item.value}</li>)
                }
            </ul>
        </div>
    )
}
